let qrCodeImg = require('@/assets/img/station-ui/生成二维码组件.png');
export const ComponentList = [{
    name: '标题',
    type: 'border-title',
    class: 'drag-item drag-title',
    icon: require('@/assets/img/station-ui/标题.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <p class="border-title">
        <span class="drag-item-text">标题</span>
    </p>`
}, {
    name: '卡片',
    type: 'card',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/卡片.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="card">
        <p class="card-title drag-item-text">卡片的标题</p>
        <p class="card-count data-val">0</p>
        <i class="el-icon-s-promotion"></i>
    </div>`
}, {
    name: '输入框',
    type: 'input',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/输入框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">输入框</span>：</label>
    <input class="el-input__inner" type="text" name="input" autocomplete="off">`
}, {
    name: '可控输入框',
    type: 'input-checkbox',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/输入框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">输入框</span>：</label>
    <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" disabled name="input-checkbox">
    <input class="input-checkbox" type="checkbox" value="checked">`
}, {
    name: '信息显示框',
    type: 'info-input',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/信息显示框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">信息显示框</span>：</label>
    <input class="el-input__inner" type="text" disabled name="infoInput" autocomplete="off">`
}, {
    name: '多行文本框',
    type: 'textarea',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/单选框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label style="vertical-align: top;"><span class="drag-item-text">多行文本框</span>：</label>
    <textarea class="el-textarea__inner" rows="8" type="text" name="textarea" autocomplete="off"></textarea>`
}, {
    name: '选择数据框',
    type: 'select-data',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/搜索框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">选择数据框</span>：</label>
    <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
        <input class="el-input__inner" type="text" disabled name="selectData">
        <div class="el-input-group__append">
            <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
        </div>
    </div>`
}, {
    name: '复选框',
    type: 'checkbox',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/下拉框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">复选框</span>：</label>
    <div class="checkbox">
        <label>
            <input type="checkbox" checked="checked" name="checkboxName">
            示例1
        </label>
    </div>`
}, {
    name: '单选框',
    type: 'radio',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/单选框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">单选框</span>：</label>
    <div class="radio">
        <label>
            <input type="radio" name="radioName" value="PASS" checked>合格
        </label>
        <label>
            <input type="radio" name="radioName" value="FAIL">不合格
        </label>
    </div>`
}, {
    name: '下拉框',
    type: 'select',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/下拉框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">下拉框</span>：</label>
    <select name="selectName" style="border-color: #dcdfe6; border-radius: 4px; padding: 0px 12px; color: #606266; height: 32px;">
        <option value="" selected="selected">请选择</option>
        <option value="示例1">示例1</option>
    </select>`
}, {
    name: '附件上传',
    type: 'file-button',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/输入框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="fileBtn">
        <button type="button" class="el-button el-button--primary el-button--small">
            <span class="btn-label">
                <i class=""></i>
            </span>
            <span class="drag-item-text">附件上传</span>
        </button>
    </div>`
}, {
    name: '表格',
    type: 'table',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/表格.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="table-dark">
        <p class="table-title"> <span class="drag-item-text">表格标题</span> <span style="float:right;margin-right: 10px;">共 <span class="table-length">0</span> 项</span></p>
        <table>
            <thead>
                <th>序号</th>
                <th>列名1</th>
                <th>列名2</th>
                <th>列名3</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>内容3</td>
                </tr>
            </tbody>
        </table>
    </div>`
}, {
    name: '按钮',
    type: 'button',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/按钮.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="submitBtn">
        <button type="button" class="el-button el-button--primary el-button--small">
            <span class="btn-label">
                <i class=""></i>
            </span>
            <span class="drag-item-text">按钮</span>
        </button>
    </div>`
}, {
    name: '图片',
    type: 'picture',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/图片.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="picture-content">
        <img alt="图片地址路径错误" src="/img/station-flow/FAIL.png">
    </div>`
}, {
    name: '打印机',
    type: 'printers',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/打印机.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">打印机</span>：</label>
    <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
        <input class="el-input__inner" type="text" disabled placeholder="请选择打印机" name="printId">
        <div class="el-input-group__append">
            <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
        </div>
    </div>`
}, {
    name: '标签模板',
    type: 'print-label',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/标签模板.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">标签模板</span>：</label>
    <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
        <input class="el-input__inner" type="text" disabled placeholder="请选择标签模板" name="labelTemplateId">
        <div class="el-input-group__append">
            <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
        </div>
    </div>`
}, {
    name: '载具',
    type: 'vehicle',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/标签模板.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <label><span class="drag-item-text">载具</span>：</label>
    <input class="el-input__inner" type="text" name="carrierSn" autocomplete="off">`
}, {
    name: '扩展属性',
    type: 'extended-fields',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/标签模板.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div id="extendedFieldsList">
        <div class="extendedFields">
            <label><span class="drag-item-text">扩展属性</span>：</label>
            <input class="el-input__inner" type="text" name="options" autocomplete="off">
        </div>
    </div>`
}, {
    name: '多不良现象',
    type: 'attribute-copy',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/标签模板.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div id="attributeCopy">
        <div class="failureCode">
            <label><span class="drag-item-text">不良现象代码</span>：</label>
            <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
                <input class="el-input__inner" type="text" name="failureList" placeholder="请输入不良现象代码">
                <div class="el-input-group__append">
                    <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
                </div>
            </div>
        </div>
        <div class="unqualifiedQuantity">
            <label><span class="drag-item-text">数量</span>：</label>
            <input class="el-input__inner" type="number" name="unqualifiedQuantity" autocomplete="off" placeholder="请输入数量">
        </div>
        <div class="attributeCopyBtn">
            <button type="button" class="el-button el-button--primary el-button--small">+</button>
        </div>
    </div>`
}, {
    name: '扩展打印',
    type: 'multiple-print',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/打印机.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div id="multiplePrint">
        <div class="labelTemplate">
            <label><span class="drag-item-text">标签模板</span>：</label>
            <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
                <input class="el-input__inner" type="text" disabled placeholder="请选择标签模板">
                <div class="el-input-group__append">
                    <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
                </div>
            </div>
        </div>
        <div class="print">
            <label><span class="drag-item-text">打印机</span>：</label>
            <div class="el-input el-input--small el-input-group el-input-group--append el-input--suffix avue-input">
                <input class="el-input__inner" type="text" disabled placeholder="请选择打印机">
                <div class="el-input-group__append">
                    <button type="button" class="el-button el-button--default el-button--small"><i class="el-icon-search"></i></button>
                </div>
            </div>
        </div>
        <div class="multiplePrintBtn">
            <button type="button" class="el-button el-button--primary el-button--small">+</button>
        </div>
    </div>`
}, {
    name: '记录项',
    type: 'record-item',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/输入框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div id="recordItemList">
        <div class="recordItem">
            <label><span class="drag-item-text">记录项</span>：</label>
            <input class="el-input__inner" type="text" name="reference" autocomplete="off">
        </div>
    </div>`
}, {
    name: '二维码',
    type: 'qrcode',
    class: 'drag-item drag-form-group',
    icon: require('@/assets/img/station-ui/输入框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div id="qrCode" ref="qrCode">
        <img style="width: 100px;height: 100px;" src=${qrCodeImg}>
    </div>`
}, {
    name: 'API检查步骤',
    type: 'check-step',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/检查步骤.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="check-step-content">
        <p class="border-title"><span class="drag-item-text">API检查步骤</span></p>
        <div class="step-content"></div>
    </div>`
}, {
    name: '检验报告',
    type: 'report',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/表格.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="table-report" title="双击单元格后可修改单元格中文本信息,再次双击变为不可编辑">
        <table border="1" cellpadding="0" cellspacing="0" style="text-align: center; font-size:12px;color: #333;border-collapse: collapse;">
            <tbody>
                <tr>
                    <td colspan="6" style="font-size: 27px;line-height: 45px;">XX有限公司</td>
                </tr>
                <tr>
                    <td colspan="6" style="font-size: 20px;line-height: 32px;">XX测试报告</td>
                </tr>
                <tr>
                    <td>产品型号：</td>
                    <td data-name="partSpecifications"></td>
                    <td>检验日期：</td>
                    <td style="width:300px;" data-name="examinedDate"></td>
                    <td>湿度：</td>
                    <td data-name="humidity"></td>
                </tr>
                <tr>
                    <td>出厂编号：</td>
                    <td data-name="factoryCode"></td>
                    <td>测试人员：</td>
                    <td data-name="examinedBy"></td>
                    <td>品质确认：</td>
                    <td data-name="qualityConfirmation"></td>
                </tr>
                <tr>
                    <td colspan="4"></td>
                    <td>判定</td>
                    <td data-name="examinedResult"></td>
                </tr>
                <tr data-name="attributes">
                    <td data-name="sequence" style="width: 140px;">序号</td>
                    <td data-name="type">检验项目</td>
                    <td data-name="zhCnName" colspan="2">检验标准</td>
                    <td data-name="checkValue">检验结果</td>
                    <td data-name="zhCnContent">备注</td>
                </tr>
            </tbody>
        </table>
    </div>`
}, {
    name: '图表',
    type: 'chart',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/检查步骤.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="height: 350px">Slide 1</div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    </div>`
}, {
    name: '隐藏按钮',
    type: 'hidebtn',
    class: 'drag-item',
    icon: require('@/assets/img/station-ui/下拉框.png'),
    innerHTML: `<i class="el-icon-circle-close closer"></i>
    <div class="hideBtn">
        <button type="button" class="el-button el-button--primary el-button--small is-circle">
            <span class="btn-label">
                <i class="el-icon-arrow-down"></i>
            </span>
        </button>
    </div>`
}]
